<!-- 侧边 -->
<div class="grow-0 shrink-0 xl:w-96">
  <div
    id="right-box-fixed"
    class="right-with max-xl:left-0 max-xl:overflow-auto max-xl:hidden max-xl:w-screen max-xl:h-screen max-xl:fixed max-xl:top-16 max-xl:z-50 h-fit xl:w-96"
  >
    <slot />
  </div>
</div>

<style>
  .right-box-fixed {
    position: fixed;
    bottom: 60px;
  }

  @media not all and (min-width: 1280px) {
    .right-with {
      min-width: 100vw;
    }
  }
</style>

<script>
  class CommonRight extends HTMLElement {
    constructor() {
      super();
      // 从 data（数据）属性中读取消息。
      const eventString = this.dataset.event;
    //   将字符串转换为函数。
      var evet;
      if (eventString) {
        evet = new Function("return " + eventString);
      }
      const y = document.getElementById("right-box-fixed");
      const browserWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      if (y) {
        const yLeft = y.offsetLeft;
        y.style.left = yLeft + "px";
        window.addEventListener("scroll", function () {
          var scrollTop =
            window.pageYOffset ||
            document.documentElement.scrollTop ||
            document.body.scrollTop;

          if (browserWidth > 1280) {
            if (
              scrollTop > y.offsetTop + y.offsetHeight &&
              !y.classList.contains("right-box-fixed")
            ) {
              y.classList.add("right-box-fixed");
            } else if (y.offsetHeight > scrollTop) {
              y.classList.remove("right-box-fixed");
            }
          } else {
          }
          evet()(scrollTop);
        });
      }
    }
  }

  customElements.define("common-right", CommonRight);
</script>
